import React, { useState } from 'react';
import { Input, Button, Avatar } from 'antd';
import { SendOutlined } from '@ant-design/icons';
import styles from './index.less';

const { TextArea } = Input;

interface ReplyBoxProps {
  targetUsername?: string;
  userAvatar?: string;
  placeholder?: string;
  onSubmit?: (content: string) => void;
  onCancel?: () => void;
  showCancel?: boolean;
  maxLength?: number;
}

const ReplyBox: React.FC<ReplyBoxProps> = ({
  targetUsername,
  userAvatar = '/h:/IDEA/Projects/iiiu/ui/src/assets/images/post.png',
  placeholder = '写下你的回复...',
  onSubmit,
  onCancel,
  showCancel = true,
  maxLength = 200
}) => {
  const [content, setContent] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSubmit = async () => {
    if (!content.trim()) {
      return;
    }

    setLoading(true);
    try {
      await onSubmit?.(content.trim());
      setContent('');
    } catch (error) {
      console.error('提交失败:', error);
    } finally {
      setLoading(false);
    }
  };

  const handleCancel = () => {
    setContent('');
    onCancel?.();
  };

  // 动态生成占位符
  const dynamicPlaceholder = targetUsername ? `回复@${targetUsername}：` : placeholder;

  return (
    <div className={styles.replyBox}>
      {/* 左侧头像 */}
      <div className={styles.avatarSection}>
        <Avatar 
          src={userAvatar} 
          size={36}
          className={styles.avatar}
        />
      </div>
      
      {/* 右侧内容区域 */}
      <div className={styles.contentSection}>
        {/* 输入框包装器 */}
        <div className={styles.inputWrapper}>
          <TextArea
            value={content}
            onChange={(e) => setContent(e.target.value)}
            placeholder={dynamicPlaceholder}
            autoSize={{ minRows: 2, maxRows: 4 }}
            maxLength={maxLength}
            className={styles.textArea}
          />
        </div>
        
        {/* 操作按钮 */}
        <div className={styles.actionButtons}>
          {showCancel && (
            <Button
              onClick={handleCancel}
              className={styles.cancelBtn}
            >
              取消
            </Button>
          )}
          <Button
            type="primary"
            icon={<SendOutlined />}
            onClick={handleSubmit}
            loading={loading}
            disabled={!content.trim()}
            className={styles.submitBtn}
          >
            发布
          </Button>
        </div>
      </div>
    </div>
  );
};

export default ReplyBox;